<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>users</title>
    <style>
        li{
            list-style: none;
        }
        #usert li{
            display: flex;
            flex-direction: row;
        }
        #usert li div{
            width: 120px;
            border: 1px dashed gainsboro;
        }
    </style>
    <script src="/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>用户列表</h1>
<p id="search">
    <input type="search" id="gname" name="gname"/>
    <input type="button" id="searchBtn" value="搜索"/>
</p>
<ul id="usert">
    <li>
        <div class="c1">编号</div>
        <div class="c1">年级名</div>
    </li>
</ul>
<p id="page">
    <a href="#" id="first" data-pageNo="1">首页</a>
    <a href="#" id="prev">上一页</a>
    <a href="#" id="next">下一页</a>
    <a href="#" id="last">尾页</a>
</p>
<script>
    $(function (){
       let pageNo=1;
       let pagSize=5;
       let gname="";
       let tab=$("#usert");
       function doLoad(){
           //tab.empty();
           tab.find("li:gt(0)").remove();
           $.get("/grade/list",{pageNo:pageNo,pageSize:pagSize,gname:gname},function (p){
               //forEach
               $.each(p.data,function (i,x){
                   tab.append("<li><div>"+x.id+"</div><div>"+x.gname+"</div></li>");
               });
               //给a加一个没有的属性，
               $("a#prev").attr("data-pageNo",p.pageNo-1);
               if(p.pageNo<=1){
                   $("a#prev").css("pointer-events","none");
               }
               $("a#next").attr("data-pageNo",p.pageNo+1);
               if(p.pageNo>=p.pageTotal){
                   $("a#next").css("pointer-events","none");
               }
               $("a#last").attr("data-pageNo",p.pageTotal);
           });
       }
       $("#page a").click(function(){
           pageNo=$(this).attr("data-pageNo");
           doLoad();
           return false;//让a不跳转
       });
       $("#searchBtn").click(function (){
           pageNo=1;
           gname=$("#gname").val();
           doLoad();
           return false;
       });

        doLoad();
    });
</script>
</body>
</html>